import React, { useState } from 'react'
import styles from './index.less'
import { Radio, Tag, Switch } from 'antd'
import { CloseSquareOutlined } from '@ant-design/icons'
import { TwitterPicker } from 'react-color'
import Nav from './nav'
const formItem = { display: "flex", alignItems: "center", marginBottom: "20px" }
const labelStyle: any = { flexBasis: "100px", textAlign: "right" };
export default (props: any) => {

    const { data, setData, navList, setNavList } = props
    const [bgColorVisable, setBgColorVisable] = useState(false)
    const [fontColorVisable, setFontColorVisable] = useState(false)

    // const [navList, setNavList] = useState([1, 2])

    const bgStyle = { display: "block", border: "1px solid #C9C9C9", backgroundColor: data.bg_color, width: "40px", height: "20px", cursor: "pointer" }

    return (
        <div className={styles.containerDiv}>
            <div style={formItem}>
                <div style={labelStyle}>导航类型：</div>
                <Radio.Group value={data.nav_type} onChange={(e) => {
                    setData({ ...data, nav_type: Number(e.target.value) })
                }}>
                    <Radio value={1}>图文</Radio>
                    <Radio value={2}>图片</Radio>
                    <Radio value={3}>文字</Radio>
                </Radio.Group>
            </div>
            <div style={formItem}>
                <div style={labelStyle}> 背景颜色：</div>
                <div style={{ position: "relative" }}>
                    <span style={bgStyle} onClick={() => setBgColorVisable(true)} />
                    {bgColorVisable && <div style={{ position: "absolute", top: "35px", left: 0, zIndex: 1 }}>
                        <TwitterPicker onChangeComplete={(color: any) => {
                            setData({ ...data, bg_color: color.hex })
                            setBgColorVisable(false)
                        }} />
                    </div>}
                </div>
            </div>

            <div style={formItem}>
                <div style={labelStyle}> 文字颜色：</div>
                <div style={{ position: "relative" }}>
                    <Tag
                        color={data.font_color} onClick={() => setFontColorVisable(true)}
                        style={{ cursor: "pointer" }}>
                        取色
                    </Tag>
                    {fontColorVisable && <div style={{ position: "absolute", top: "35px", left: 0, zIndex: 1 }}>
                        <TwitterPicker onChangeComplete={(color: any) => {
                            setData({ ...data, font_color: color.hex })
                            setFontColorVisable(false)
                        }} />
                    </div>}
                </div>
            </div>

            <div style={formItem}>
                <div style={labelStyle}> 导航悬浮：</div>
                <Switch />
            </div>

            {
                navList.map((item: any, inx: number) => {
                    return (
                        <Nav key={inx} setNavList={setNavList} inx={inx} navList={navList} />
                    )
                })
            }

            <div
                style={{ border: "1px dashed #e5e5e5", padding: "10px", margin: "10px 0", cursor: "pointer" }}
                onClick={() => {
                    const result = [...navList]
                    result.push({
                        title: "",
                        url: ""
                    })
                    setNavList(result)
                }}
            >
                添加图文导航
            </div>
            <div style={{ color: "#999", fontSize: "12px", padding: "0 12px" }}>
                建议上传比例相同的图片，最多添加 5 个底部导航，拖动选中的导航可对其排序
            </div>
        </div>
    )
}